<template xmlns="http://www.w3.org/1999/html">
	<div class="register">
				<div class="big-contain" key="bigContainRegister" >
					<div class="btitle">丝域尊享卡激活</div>
					<div class="bform">
            <span>卡号: <input type="text" placeholder="卡号" v-bind:value="parameters.cardNo" v-bind:disabled="diasabledInput"    ></span>
            <!--<span class="errTips" v-if="emailError">* 挨罚 *</span> -->
            <span >金额: <input type="text" placeholder="金额"   v-bind:disabled="diasabledInput"   v-bind:value="parameters.amount"></span>
            <!-- <span class="errTips" v-if="emailError">* 礼品号码错误 *</span> -->
             <span>姓名:<input type="text" placeholder="用户名" id="username" v-model="parameters.username"  @blur="insertUserName($event)"></span>
            <!-- <span class="errTips" v-if="existed">* 用户名已经存在！ *</span> -->
            <span>手机: <input type="text" placeholder="手机号" name="iphoneNo" v-model="parameters.iphoneNo"  @blur="insertIphoneNo($event)"></span>
           <!-- <span class="errTips" v-if="emailError">* 手机号填写错误 *</span> -->
          </div>
          <el-button type="primary" class="bbutton" @click="register">申请激活</el-button>
        </div>
       <div class="small-box" :class="{active:isLogin}"  >
       <div class="small-contain" key="smallContainLogin" >
        <div class="stitle">欢迎回来!</div>
        <p class="scontent">与我们保持联系，请登录你的账户</p>
      </div>
    </div>
      </div>
</template>

<script>
  export default{
    name:'register',
    data(){
      return {
        diasabledInput:true,
        emailError: false,
        passwordError: false,
        existed: false,
        isLogin:true,
        parameters:{
          username:'',
          iphoneNo:'',
          cardNo:'',
          amount:''
        }
      }
    },

    created() {

       const locationURL= document.location.toString();

      function getUrlParam(paraName,locationURL){

        let x;
        let arrPara;
        const url = decodeURIComponent(locationURL);

        const arrObj = url.split("?");

        if(arrObj.length>2){

          for(x = 1; x<arrObj.length; x++){

            arrPara = arrObj[x].split("&");

            let arr;

            for (let i = 0; i < arrPara.length; i++){

              arr = arrPara[i].split("=");

              if (arr != null && arr[0] ==paraName) {

                return arr[1];

              }

            }

          }

          return "";

        } else if (arrObj.length>1){

          arrPara = arrObj[1].split("&");

          let arr;

          for(x = 0; x <arrPara.length; x++){

            arr = arrPara[x].split("=");

            if(arr != null && arr[0] == paraName) {

              return arr[1];

            }

          }

          return "";

        }else{

          return "";

        }

      }

      const cardNo= getUrlParam('cardNo',locationURL);
      const amount= getUrlParam('amount',locationURL);
      this.parameters.amount=amount
      this.parameters.cardNo=cardNo
    },
    methods:{
      login() {
        const self = this;
        if (self.parameters.username != "" && self.parameters.iphoneNo != "") {
          self.$axios({
            method:'post',
            url: 'http://116.205.138.74:8080/admin/register',
            data: {
              userName: self.parameters.username,
              iphoneNo:self.parameters.iphoneNo,
              cardNo: self.parameters.cardNo,
              amount: self.parameters.amount,
            }
          })
          .then( res => {
            switch(res.data){
              case 0:
                alert("登陆成功！");
                break;
              case -1:
                this.emailError = true;
                break;
              case 1:
                this.passwordError = true;
                break;
            }
          })
          .catch( err => {
            console.log(err);
          })
        } else{
          alert("填写不能为空！");
        }
      },


      insertUserName(e){
        if(!e.target.value.trim()) return alert("姓名不能为空")
      },
      insertIphoneNo(e){
        if(!e.target.value.trim()) return alert("手机不能为空")
      },

      register(){
        const self = this;
        this.$confirm(`姓名：【${self.parameters.username}】`+
        `电话：【${self.parameters.iphoneNo}】`+
        `确认提交激活？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(
            () =>{
              if(self.parameters.username != "" && self.parameters.iphoneNo != "" ){
                self.$axios({
                  method:'post',
                  url: 'http://116.205.138.74:8080/admin/register',
                  data: {
                    userName: self.parameters.username,
                    iphoneNo:self.parameters.iphoneNo,
                    cardNo: self.parameters.cardNo,
                    amount: self.parameters.amount,
                  },
                  headers: {
                    'Content-Type': 'application/json;charset=UTF-8'
                  },
                }).then(res => res.data).then(res=>  {
                      switch(res.code){
                        case 0:
                          alert(res.msg);
                          break;
                        case -1:
                          alert(res.msg);
                          this.existed = true;
                          break;
                      }
                    })
                    .catch( err => {
                      console.log(err);
                    })
              } else {
                this.$message({
                  type: 'info',
                  message: ' 手机号 姓名 不能为空 操作已取消'
                });
              }
            }
        ).catch(() => {
          // 用户点击了取消按钮
          // 在这里编写具体的操作代码
          this.$message({
            type: 'info',
            message: '操作已取消'
          });
        });

      }
    }
  }
</script>

<style scoped="scoped">
  .register{
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
  }
  .big-contain{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .btitle{
    font-size: 1.5em;
    font-weight: bold;
    color: rgb(57,167,176);
  }
  .bform{
    width: 100%;
    height: 40%;
    padding: 2em 0;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
  }
  .bform .errTips{
    display: block;
    width: 50%;
    text-align: left;
    color: red;
    font-size: 0.7em;
    margin-left: 1em;
  }
  .bform input{
    width: 50%;
    height: 30px;
    border: none;
    outline: none;
    border-radius: 10px;
    padding-left: 2em;
    background-color: #f0f0f0;
  }
  .bbutton{
    width: 20%;
    height: 40px;
    border-radius: 24px;
    border: none;
    outline: none;
    background-color: rgb(57,167,176);
    color: #fff;
    font-size: 0.9em;
    cursor: pointer;
  }
  .small-box{
    width: 30%;
    height: 100%;
    background: linear-gradient(135deg,rgb(57,167,176),rgb(56,183,145));
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(0%);
    transition: all 1s;
    border-top-left-radius: inherit;
    border-bottom-left-radius: inherit;
  }
  .small-contain{
    width: 10%;
    height: 10%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .stitle{
    font-size: 1.5em;
    font-weight: bold;
    color: #fff;
  }
  .scontent{
    font-size: 0.8em;
    color: #fff;
    text-align: center;
    padding: 2em 4em;
    line-height: 1.7em;
  }
  .sbutton{
    width: 60%;
    height: 40px;
    border-radius: 24px;
    border: 1px solid #fff;
    outline: none;
    background-color: transparent;
    color: #fff;
    font-size: 0.9em;
    cursor: pointer;
  }

  .big-box.active{
    left: 0;
    transition: all 0.5s;
  }
  .small-box.active{
    left: 10%;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: inherit;
    border-bottom-right-radius: inherit;
    transform: translateX(-100%);
    transition: all 1s;
  }
</style>
